
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入vue的js--%>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <%--引入element的js--%>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <%--引入axios的js--%>
    <script src="js/axios.min.js"></script>
    <%--引入elementui的样式--%>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<%--    //搜索表单--%>
    <el-form :inline="true" :model="studentVo" class="demo-form-inline">
        <el-form-item label="姓名">
            <el-input v-model="studentVo.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="班级">
            <el-select v-model="studentVo.cid" placeholder="班级">
                <el-option v-for="c in classes" :label="c.grade" :value="c.cid"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
            <el-button type="warning" icon="el-icon-refresh" @click="reset">重置</el-button>
            <el-button type="success" icon="el-icon-plus" @click="addShow">添加</el-button>
        </el-form-item>
    </el-form>
<%--    添加学生对话框--%>
<%--    :visible.sync==控制对话框的显示和隐藏  true显示  false隐藏--%>
    <el-dialog title="添加学生" :visible.sync="dialogFormVisible" width="40%">
        <el-form :model="addForm" :rules="addRules" ref="formRef">
            <el-form-item label="姓名" label-width="80" prop="name">
                <el-input v-model="addForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话" :label-width="80" prop="phone">
                <el-input v-model="addForm.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" :label-width="80" prop="email">
                <el-input v-model="addForm.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="专业" :label-width="80" prop="profession">
                <el-input v-model="addForm.profession" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="年龄" :label-width="80" prop="age">
                <el-input v-model.number="addForm.age" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="入学日期" :label-width="80" prop="hiredate">
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="addForm.hiredate" style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item label="班级" :label-width="80" prop="cid">
                <el-select v-model="addForm.cid" placeholder="请选择班级">
                    <el-option v-for="c in classes" :label="c.grade" :value="c.cid"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addStudent">确 定</el-button>
        </div>
    </el-dialog>
    <%--    修改学生对话框--%>
    <el-dialog title="添加学生" :visible.sync="dialogFormVisible2" width="40%">
        <el-form :model="editForm" :rules="addRules" ref="formRef">
            <el-form-item label="姓名" label-width="80" prop="name">
                <el-input v-model="editForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话" :label-width="80" prop="phone">
                <el-input v-model="editForm.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" :label-width="80" prop="email">
                <el-input v-model="editForm.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="专业" :label-width="80" prop="profession">
                <el-input v-model="editForm.profession" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="年龄" :label-width="80" prop="age">
                <el-input v-model.number="editForm.age" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="入学日期" :label-width="80" prop="hiredate">
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="editForm.hiredate" style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item label="班级" :label-width="80" prop="cid">
                <el-select v-model="editForm.cid" placeholder="请选择班级">
                    <el-option v-for="c in classes" :label="c.grade" :value="c.cid"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="editOff">取 消</el-button>
            <el-button type="primary" @click="editStudent">确 定</el-button>
        </div>
    </el-dialog>
<%--    学生表--%>
    <el-table
            v-loading="loading"
            :data="students"
            border
            style="width: 100%">
        <el-table-column
                prop="id"
                label="编号"
                width="80">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="80">
        </el-table-column>
        <el-table-column
                prop="phone"
                label="电话"
                width="150">
        </el-table-column>
        <el-table-column
                prop="email"
                label="邮箱"
                width="240">
        </el-table-column>
        <el-table-column
                prop="profession"
                label="专业">
        </el-table-column>
        <el-table-column
                prop="age"
                label="年龄"
                width="80">
        </el-table-column>
        <el-table-column
                prop="hiredate"
                label="入学日期">
        </el-table-column>
        <el-table-column
                prop="clazz.grade"
                label="班级">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="200">
            <template slot-scope="scope">
                <el-button type="danger" size="small" @click="delStudent(scope.row)">删除</el-button>
                <el-button type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
<%--    分页组件--%>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[2, 5, 10, 15]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
</body>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            //当前页的学生数据
            students:[],
            //当前页码
            current:1,
            //默认每页的大小
            pageSize: 5,
            //总条数
            total:0,
            //搜索表单对象
            studentVo:{
                name:"",
                cid:"",
            },
            //所有班级
            classes:[],
            //控制添加对话框的显示和隐藏
            dialogFormVisible: false,
            //添加学生表单对象
            addForm:{},
            //添加表单校验规则
            addRules:{
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                ],
                age: [
                    { required: true, message: '请输入年龄', trigger: 'blur' },
                    { type: 'number', message: '年龄必须为数值', trigger: 'blur' },
                ],
                phone: [
                    { required: true, message: '请输入电话号码', trigger: 'blur' },
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                ],
                profession: [
                    { required: true, message: '请输入专业', trigger: 'blur' },
                ],
                hiredate: [
                    {required: true, message: '请选择入学日期', trigger: 'blur' }
                ],
                cid: [
                    {required: true, message: '请选择一个班级', trigger: 'blur' }
                ],
            },
            //控制修改对话框的显示和隐藏
            dialogFormVisible2: false,
            //修改表单对象
            editForm:{},
            //加载中...
            loading:true,
        },
        //页面加载完毕后执行的函数
        created(){
            this.loadStudent();
            this.loadClass();
        },
        //操作学生表
        methods:{
            //取消修改
            editOff(){
                this.dialogFormVisible2 = false;
                this.loadStudent();
            },
            //修改表单确认
            editStudent(){
                //调用后台接口
                this.$refs.formRef.validate((valid) => {
                    if (valid) {
                        //调用后端接口
                        axios.post("/stu/update",this.editForm).then(result=>{
                            if (result.data===1) {
                                //关闭对话框
                                this.dialogFormVisible2 = false;
                                //响应消息
                                this.$message.success("修改成功！");
                                //重新加载表格
                                this.loadStudent();
                            }
                        })
                    }else {
                        return false;
                    }
                })
            },
            //修改按钮事件
            edit(row){
                this.dialogFormVisible2=true;
                this.editForm=row;
            },
            //表单添加学生确认
            addStudent(){
                //调用后台添加学生接口
                this.$refs.formRef.validate((valid) => {
                    if (valid) {
                        //调用后端接口
                        axios.post("/stu/save",this.addForm).then(result=>{
                            if (result.data===1) {
                                //关闭对话框
                                this.dialogFormVisible = false;
                                //响应消息
                                this.$message.success("添加成功！");
                                //重新加载表格
                                this.loadStudent();
                                //重置表单
                                this.$refs.formRef.resetFields();
                            }
                        })
                    }else {
                        return false;
                    }
                })
            },
            //添加按钮事件，显示添加对话框
            addShow(){
                this.dialogFormVisible=true;
            },
            //删除按钮
            delStudent(row){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //调用后台删除接口
                    axios.get("/stu/deleteById/"+row.id).then(result=>{
                        if (result.data===1){
                            //提示
                            this.$message.success("删除成功!")
                            //重新加载
                            this.loadStudent();
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //刷新按钮
            reset(){
                this.studentVo.name="";
                this.studentVo.cid="";
                this.search();
            },
            //加载所有班级信息
            loadClass(){
                axios.get("/class/list").then(result=>{
                    this.classes=result.data
                })
            },
            //加载学生信息
            loadStudent(){
                this.loading=true;
                axios.post("/stu/list/"+this.current+"/"+this.pageSize,this.studentVo).then(result=>{
                    this.students=result.data.list
                    //总条数
                    this.total=result.data.total;
                    this.loading=false;
                })
            },
            //页面大小改变时的函数
            handleSizeChange(val) {
                this.pageSize=val;
                this.loadStudent();
            },
            //页码改变时的函数
            handleCurrentChange(val) {
                this.current=val;
                this.loadStudent();
            },
            //搜索按钮事件
            search(){
                this.current=1;
                this.loadStudent();
            }
        }
    })
</script>
</html>
